<template>
  <div class="app-container">
    <SearchFormCard :show-further-btn="false">
      <template slot="btns"/>
      <template slot="common">
        <el-radio-group v-model="listQuery.app" style="float: left" class="filter-item filter-item-left" size="medium" @change="loadData">
          <el-radio-button label="" >全部</el-radio-button>
          <el-radio-button label="app-api" >接口</el-radio-button>
          <el-radio-button label="admin-api" >后台</el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="listQuery.exception" class="filter-item filter-item-left" size="medium" @change="loadData">
          <el-radio-button label="" >全部</el-radio-button>
          <el-radio-button label="N" >正常</el-radio-button>
          <el-radio-button label="Y" >异常</el-radio-button>
        </el-radio-group>
        <el-input
          v-model="listQuery.key"
          clearable
          class="filter-item"
          style="width: 200px;"
          placeholder="接口名称/接口地址"/>
        <el-input
          v-model="listQuery.businessNo"
          clearable
          class="filter-item"
          style="width: 200px;"
          placeholder="业务编号"/>
        <el-input
          v-model="listQuery.userName"
          clearable
          class="filter-item"
          style="width: 200px;"
          placeholder="操作用户"/>
        <el-button class="filter-item " style="margin-left: 8px" size="small" type="primary" icon="el-icon-search" @keyup.enter.native="loadData" @click="loadData">
          查找
        </el-button>
      </template>
    </SearchFormCard>

    <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <el-table-column align="center" width="300px" label="接口名称">
        <template slot-scope="scope">
          <span>{{ scope.row.urlDesc }}</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip ="true" align="center" width="300px" label="接口地址">
        <template slot-scope="scope">
          <span>{{ scope.row.url }}</span>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        fixed="left"
        width="210"
        label="业务编号">
        <template slot-scope="scope">
          <ClipboardButton v-if="scope.row.businessNo" :content="scope.row.businessNo" >
            <!-- <el-button type="text" size="small" @click="openDialog('view',scope.row)">{{ scope.row.cleanerCode }}</el-button>-->
            <el-button type="text" size="small" >{{ scope.row.businessNo }}</el-button>
          </ClipboardButton>
        </template>
      </el-table-column>
      <el-table-column align="center" label="IP">
        <template slot-scope="scope">
          <span>{{ scope.row.ip }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否异常">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isException == 'N'" type="success">正常</el-tag>
          <el-tag v-if="scope.row.isException == 'Y'" type="danger">异常</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.app == 'app-api'" type="success">接口</el-tag>
          <el-tag v-if="scope.row.app == 'admin-api'" >后台</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="执行时间">
        <template slot-scope="scope">
          <span>{{ scope.row.timeUse }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作用户">
        <template slot-scope="scope">
          <span>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="操作时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" align="center" label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" size="mini" icon="el-icon-search" @click="logViewShow(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="loadData"/>
    <log-view v-if="logShow" ref="logView" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import logView from '@/views/log/logView'
import SearchFormCard from '@/components/SearchFormCard' // 搜索表单
import { fetchList } from '@/api/list'
export default {
  name: 'LogList',
  components: { Pagination, logView, SearchFormCard },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      url: 'optLog/list',
      list: null,
      total: 0,
      listLoading: true,
      keyword: '',
      logShow: false,
      listQuery: {
        page: 1,
        limit: 20,
        app: '',
        key: '',
        exception: '',
        businessNo: '',
        userName: ''
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      fetchList(this)
    },
    logViewShow(item) {
      this.logShow = true
      this.$nextTick(() => {
        this.$refs.logView.init(item.requestNo, item.urlDesc)
      })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.loadData()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.loadData()
    }
  }
}
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
